<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="admin/_fragments :: head(~{::title})">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>分类管理</title>
		<link rel="stylesheet" href="../../static/css/me.css"/>
		<!-- 引入semantic css-->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css">
	</head>
	<body>
		<!--导航-->
		<nav th:replace="admin/_fragments :: menu(2)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">后台管理</h2>
					<a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<div class="right m-item m-mobile-hide menu">
						<div class="ui dropdown item">
							<div class="text">
								<img class="ui avatar image" src="https://picsum.photos/id/237/200/300" alt="" />
								derek
							</div>
							<div class="dropdown icon"></div>
							<div class="menu">
								<a href="#" class="item">注销</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		<!-- 二级导航 -->
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="#" th:href="@{/admin/type-input}" class="teal active item">新增</a>
					<a href="#" th:href="@{/admin/types}" class="item">列表</a>
				</div>	
			</div>
			
		</div>
		
		
		
		<!--中间内容-->
		<div class="m-container m-padding-tb-big">
			<div class="ui container">
				<form action="#" method="post" th:action="*{id}==null ? @{/admin/types} : @{/admin/types/(id=*{id})}" class="ui form" th:object="${type}">
					<input type="hidden" name="id" th:value="*{id}">
					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">名称</label>
							<input type="text" name="name" placeholder="分类名称" th:value="*{name}"/>
						</div>
					</div>
					

					
					<div class="ui error message">
						<!-- 错误提示 -->
					</div>

					<!--/*/
					<div class="ui negative message" th:if="${#fields.hasErrors('name')}">
						<i class="close icon"></i>
						<div class="header">添加失败！</div>
						<p th:errors="*{name}">提交信息不符合规范</p>
					</div>
					/*/-->

					
					 <div class="ui right aligned container">
						 <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
						 <button class="ui teal submit button">提交</button>
					 </div>
				</form>
			</div>
		</div>


		<br>
		<br>
		<br>
		<br><br>
		<br>
		<br>
		<br>
		<br>
		<br><br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br><br>
		<br>
		<br>
		<br>
		<!--底部 footer-->
		<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padding-tb-massive">
			<div class="ui center aligned container">
				<div class="ui inverted di vided stackable grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="../../static/img/QRcode.png" class="ui rounded image" alt="" style="width: 100px;"/>
							</div>
						</div>	
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">联系方式</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">derek</h4>
						<p class="m-text-thin m-text-spaced m-opacity-mini">https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"><</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-mini">CopyRight</p>
			</div>		
		</footer>
		
		<!-- 引入semantic js-->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

		
		<script>
			//初始化markdowm 
			var contentEditor;
			$(function() {
			    contentEditor = editormd("md-content", {
			        width   : "100%",
			        height  : 640,
			        syncScrolling : "single",
			        path    : "../lib/editormd/lib/"
			    });
			});
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			})
			$('.ui.dropdown').dropdown();
			$('.ui.form').form({
				fields: {
					title : {
						identifier: 'name',
						rules: [{
							type: 'empty',
							prompt: '请输入分类名称！'
						}]
					}
				}
			})
			$('.message .close').on('click', function (){
				$(this)
						.closest('.message')
						.transition('fade');

			})
		</script>
	</body>
	
</html>
